<!-- MAIN CONTENT -->
<div id="content">
<div class="row">
    <big-breadcrumbs items="['Forms', 'Validation Sample look']" icon="table"
                     class="col-xs-12 col-sm-7 col-md-7 col-lg-4"></big-breadcrumbs>
    <div smart-include="app/layout/partials/sub-header.tpl.html"></div>
</div>


<div class="alert alert-block alert-info" dismisser>
    <h4 class="alert-heading">Please Note!</h4>

    <p>
        This page only shows various form element states for error and success. For a full list of error validations and
        examples click on the link below to go to the <strong>Smart Form Layouts</strong> page
    </p>
    <br>
    <a href="#/form/layouts" class="btn btn-primary"><strong><i class="fa fa-arrow-circle-right"></i> Form Layouts
        Page </strong></a>
</div>

<!-- widget grid -->
<section id="widget-grid" widget-grid>

<!-- row -->
<div class="row">

<!-- NEW WIDGET START -->
<article class="col-sm-12 col-md-12 col-lg-6">

    <!-- Widget ID (each widget will need unique ID)-->
    <div jarvis-widget id="wid-id-0" data-widget-colorbutton="false" data-widget-editbutton="false">
        <!-- widget options:
            usage: <div jarvis-widget id="wid-id-0" data-widget-editbutton="false">
            
            data-widget-colorbutton="false"	
            data-widget-editbutton="false"
            data-widget-togglebutton="false"
            data-widget-deletebutton="false"
            data-widget-fullscreenbutton="false"
            data-widget-custombutton="false"
            data-widget-collapsed="true" 
            data-widget-sortable="false"
            
        -->
        <header>
            <span class="widget-icon"> <i class="fa fa-exclamation txt-color-red"></i> </span>

            <h2>Error States </h2>

        </header>

        <!-- widget div-->
        <div>


            <!-- widget content -->
            <div class="widget-body no-padding">

                <!-- Error states for elements -->
                <form class="smart-form">
                    <header>Error states for elements</header>

                    <fieldset>
                        <section>
                            <label class="label">Text input</label>
                            <label class="input state-error">
                                <input type="text">
                            </label>

                            <div class="note note-error">This is a required field.</div>
                        </section>

                        <section>
                            <label class="label">File input</label>

                            <div class="input input-file state-error">
                                <span class="button"><input type="file" id="file2"
                                                            onchange="this.parentNode.nextSibling.value = this.value">Browse</span><input
                                    type="text" readonly>
                            </div>
                            <div class="note note-error">File size must be less than 3Mb.</div>
                        </section>
                    </fieldset>

                    <fieldset>
                        <section>
                            <label class="label">Select</label>
                            <label class="select state-error">
                                <select>
                                    <option value="0">Choose name</option>
                                    <option value="1">Alexandra</option>
                                    <option value="2">Alice</option>
                                    <option value="3">Anastasia</option>
                                    <option value="4">Avelina</option>
                                </select>
                                <i></i>
                            </label>

                            <div class="note note-error">You must select an option.</div>
                        </section>
                    </fieldset>

                    <fieldset>
                        <section>
                            <label class="label">Textarea</label>
                            <label class="textarea state-error">
                                <textarea rows="3"></textarea>
                            </label>

                            <div class="note note-error">This is a required field.</div>
                        </section>
                    </fieldset>

                    <fieldset>
                        <section>
                            <label class="label">Radios</label>

                            <div class="row">
                                <div class="col col-4">
                                    <label class="radio state-error"><input type="radio"
                                                                            name="radio"><i></i>Alexandra</label>
                                    <label class="radio state-error"><input type="radio"
                                                                            name="radio"><i></i>Alice</label>
                                </div>
                                <div class="col col-4">
                                    <label class="radio state-error"><input type="radio"
                                                                            name="radio"><i></i>Avelina</label>
                                    <label class="radio state-error"><input type="radio"
                                                                            name="radio"><i></i>Basilia</label>
                                </div>
                                <div class="col col-4">
                                    <label class="radio state-error"><input type="radio"
                                                                            name="radio"><i></i>Cassandra</label>
                                    <label class="radio state-error"><input type="radio"
                                                                            name="radio"><i></i>Clemencia</label>
                                </div>
                            </div>
                            <div class="note note-error">You must select one option.</div>
                        </section>
                    </fieldset>

                    <fieldset>
                        <section>
                            <label class="label">Checkboxes</label>

                            <div class="row">
                                <div class="col col-4">
                                    <label class="checkbox state-error"><input type="checkbox" name="checkbox"><i></i>Alexandra</label>
                                    <label class="checkbox state-error"><input type="checkbox" name="checkbox"><i></i>Alice</label>
                                </div>
                                <div class="col col-4">
                                    <label class="checkbox state-error"><input type="checkbox" name="checkbox"><i></i>Avelina</label>
                                    <label class="checkbox state-error"><input type="checkbox" name="checkbox"><i></i>Basilia</label>
                                </div>
                                <div class="col col-4">
                                    <label class="checkbox state-error"><input type="checkbox" name="checkbox"><i></i>Cassandra</label>
                                    <label class="checkbox state-error"><input type="checkbox" name="checkbox"><i></i>Clemencia</label>
                                </div>
                            </div>
                            <div class="note note-error">You must select at least one option.</div>
                        </section>
                    </fieldset>

                    <fieldset>
                        <div class="row">
                            <section class="col col-5">
                                <label class="label">Toggles based on radios</label>
                                <label class="toggle state-error"><input type="radio" name="radio-toggle"><i
                                        data-swchon-text="ON" data-swchoff-text="OFF"></i>Alexandra</label>
                                <label class="toggle state-error"><input type="radio" name="radio-toggle"><i
                                        data-swchon-text="ON" data-swchoff-text="OFF"></i>Anastasia</label>
                                <label class="toggle state-error"><input type="radio" name="radio-toggle"><i
                                        data-swchon-text="ON" data-swchoff-text="OFF"></i>Avelina</label>

                                <div class="note note-error">You must select one option.</div>
                            </section>

                            <div class="col col-2"></div>

                            <section class="col col-5">
                                <label class="label">Toggles based on checkboxes</label>
                                <label class="toggle state-error"><input type="checkbox" name="checkbox-toggle"><i
                                        data-swchon-text="ON" data-swchoff-text="OFF"></i>Cassandra</label>
                                <label class="toggle state-error"><input type="checkbox" name="checkbox-toggle"><i
                                        data-swchon-text="ON" data-swchoff-text="OFF"></i>Clemencia</label>
                                <label class="toggle state-error"><input type="checkbox" name="checkbox-toggle"><i
                                        data-swchon-text="ON" data-swchoff-text="OFF"></i>Desiderata</label>

                                <div class="note note-error">You must select at least one option.</div>
                            </section>
                        </div>
                    </fieldset>

                    <footer>
                        <button type="submit" class="btn btn-primary">Submit</button>
                        <button type="button" class="btn btn-default" onclick="window.history.back();">Back</button>
                    </footer>
                </form>
                <!--/ Error states for elements -->

            </div>
            <!-- end widget content -->

        </div>
        <!-- end widget div -->

    </div>
    <!-- end widget -->

</article>
<!-- WIDGET END -->

<!-- NEW WIDGET START -->
<article class="col-sm-12 col-md-12 col-lg-6">

    <!-- Widget ID (each widget will need unique ID)-->
    <div jarvis-widget id="wid-id-2" data-widget-colorbutton="false" data-widget-editbutton="false">
        <!-- widget options:
            usage: <div jarvis-widget id="wid-id-0" data-widget-editbutton="false">
            
            data-widget-colorbutton="false"	
            data-widget-editbutton="false"
            data-widget-togglebutton="false"
            data-widget-deletebutton="false"
            data-widget-fullscreenbutton="false"
            data-widget-custombutton="false"
            data-widget-collapsed="true" 
            data-widget-sortable="false"
            
        -->
        <header>
            <span class="widget-icon"> <i class="fa fa-check txt-color-green"></i> </span>

            <h2>Success States </h2>

        </header>

        <!-- widget div-->
        <div>

            <!-- widget content -->
            <div class="widget-body no-padding">

                <!-- Success states for elements -->
                <form class="smart-form">
                    <header>Success states for elements</header>

                    <fieldset>
                        <section>
                            <label class="label">Text input</label>
                            <label class="input state-success">
                                <input type="text">
                            </label>

                            <div class="note note-success">This is a required field.</div>
                        </section>

                        <section>
                            <label class="label">File input</label>

                            <div class="input input-file state-success">
                                <span class="button"><input type="file" id="file"
                                                            onchange="this.parentNode.nextSibling.value = this.value">Browse</span><input
                                    type="text" readonly>
                            </div>
                            <div class="note note-success">This is a required field.</div>
                        </section>
                    </fieldset>

                    <fieldset>
                        <section>
                            <label class="label">Select</label>
                            <label class="select state-success">
                                <select>
                                    <option value="0">Choose name</option>
                                    <option value="1">Alexandra</option>
                                    <option value="2">Alice</option>
                                    <option value="3" selected>Anastasia</option>
                                    <option value="4">Avelina</option>
                                </select>
                                <i></i>
                            </label>

                            <div class="note note-success">Thanks for your selection.</div>
                        </section>
                    </fieldset>

                    <fieldset>
                        <section>
                            <label class="label">Textarea</label>
                            <label class="textarea state-success">
                                <textarea rows="3"></textarea>
                            </label>

                            <div class="note note-success">Thanks for your text.</div>
                        </section>
                    </fieldset>

                    <fieldset>
                        <section>
                            <label class="label">Radios</label>

                            <div class="row">
                                <div class="col col-4">
                                    <label class="radio state-success"><input type="radio" name="radio"><i></i>Alexandra</label>
                                    <label class="radio state-success"><input type="radio"
                                                                              name="radio"><i></i>Alice</label>
                                </div>
                                <div class="col col-4">
                                    <label class="radio state-success"><input type="radio" name="radio" checked><i></i>Avelina</label>
                                    <label class="radio state-success"><input type="radio"
                                                                              name="radio"><i></i>Basilia</label>
                                </div>
                                <div class="col col-4">
                                    <label class="radio state-success"><input type="radio" name="radio"><i></i>Cassandra</label>
                                    <label class="radio state-success"><input type="radio" name="radio"><i></i>Clemencia</label>
                                </div>
                            </div>
                            <div class="note note-success">Thanks for your selection.</div>
                        </section>
                    </fieldset>

                    <fieldset>
                        <section>
                            <label class="label">Checkboxes</label>

                            <div class="row">
                                <div class="col col-4">
                                    <label class="checkbox state-success"><input type="checkbox" name="checkbox"><i></i>Alexandra</label>
                                    <label class="checkbox state-success"><input type="checkbox" name="checkbox"
                                                                                 checked><i></i>Alice</label>
                                </div>
                                <div class="col col-4">
                                    <label class="checkbox state-success"><input type="checkbox" name="checkbox"><i></i>Avelina</label>
                                    <label class="checkbox state-success"><input type="checkbox" name="checkbox"><i></i>Basilia</label>
                                </div>
                                <div class="col col-4">
                                    <label class="checkbox state-success"><input type="checkbox" name="checkbox"
                                                                                 checked><i></i>Cassandra</label>
                                    <label class="checkbox state-success"><input type="checkbox" name="checkbox"><i></i>Clemencia</label>
                                </div>
                            </div>
                            <div class="note note-success">Thanks for your selection.</div>
                        </section>
                    </fieldset>

                    <fieldset>
                        <div class="row">
                            <section class="col col-5">
                                <label class="label">Toggles based on radios</label>
                                <label class="toggle state-success"><input type="radio" name="radio-toggle" checked><i
                                        data-swchon-text="ON" data-swchoff-text="OFF"></i>Alexandra</label>
                                <label class="toggle state-success"><input type="radio" name="radio-toggle"><i
                                        data-swchon-text="ON" data-swchoff-text="OFF"></i>Anastasia</label>
                                <label class="toggle state-success"><input type="radio" name="radio-toggle"><i
                                        data-swchon-text="ON" data-swchoff-text="OFF"></i>Avelina</label>

                                <div class="note note-success">Thanks for your selection.</div>
                            </section>

                            <div class="col col-2"></div>

                            <section class="col col-5">
                                <label class="label">Toggles based on checkboxes</label>
                                <label class="toggle state-success"><input type="checkbox" name="checkbox-toggle"
                                                                           checked><i data-swchon-text="ON"
                                                                                      data-swchoff-text="OFF"></i>Cassandra</label>
                                <label class="toggle state-success"><input type="checkbox" name="checkbox-toggle"><i
                                        data-swchon-text="ON" data-swchoff-text="OFF"></i>Clemencia</label>
                                <label class="toggle state-success"><input type="checkbox" name="checkbox-toggle"><i
                                        data-swchon-text="ON" data-swchoff-text="OFF"></i>Desiderata</label>

                                <div class="note note-success">Thanks for your selection.</div>
                            </section>
                        </div>
                    </fieldset>

                    <footer>
                        <button type="submit" class="btn btn-primary">Submit</button>
                        <button type="button" class="btn btn-default" onclick="window.history.back();">Back</button>
                    </footer>
                </form>
                <!--/ Success states for elements -->

            </div>
            <!-- end widget content -->

        </div>
        <!-- end widget div -->

    </div>
    <!-- end widget -->

</article>
<!-- WIDGET END -->

</div>

<!-- end row -->

</section>
<!-- end widget grid -->


</div>
<!-- END MAIN CONTENT -->